<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JsonP 实现跨域 script 脚本执行以及视频blob流</title>

</head>
<body>
  <!-- accept="video/*" 表示只选择视频文件，但是不同浏览器不验证,随意安全性不好，还是要本地验证 -->
  <input type="file" accept="video/*"  value="点击读取视频文件" id="seclectButten"/>
  <video id="videoPlayer"></video>
</body>
<script>   
  // 打印函数
   function printData(param){
       console.log('异步数据');
       console.log('param='+ param);
   }
  // var p1 = new Promise(function(res,rej){
  //   //异步数据
  //   var scrDom = document.createElement('script');
  //        scrDom.src = `test.js`;
  //        document.body.appendChild(scrDom) 
  //    // 模拟得到异步数据结果    
  //   setTimeout(function(){     
  //        res(window.a)     
  //   },3000)

  // })
  // // promise.then 回调拿回异步数据，进行下一步
  // p1.then(function(value){
  //   printData(value)
  // })
  // 实现视频video 标签blob 流
  // video 的canplay 事件在拖动的时候也能触发而在暂停回复的时候不触发
  
  // 点击按钮拿到文件对象
  var seclectButten =document.getElementById('seclectButten');
  var videoPlayer = document.getElementById('videoPlayer');
  seclectButten.addEventListener('change',function(e){
      /*  获得选中的文件对象,因为浏览器安全，file 对象无法直接得到路径，
       得用特殊的方法来读取file 对象的加密字符串才能获取文件地址 */
       var file = this.files[0];
       if(!file) return;
       var fileInfo = {'文件名称':file.name,'文件类型':file.type,'文件大小kb':file.size};
       console.table(file);
     // 异步数据操作     
      var p2video = new Promise((resolve,rej)=>{
         // 这里是将本地file文件包装成blob 对象，真实开发试讲后台传来的媒体对象包装成blob
         // 包装file 对象成为blob 型并赋值给video标签
          videoPlayer.src = window.URL.createObjectURL(file);
          // videoPlayer.poster = 'black.jpeg';
          videoPlayer.controls= true;
        videoPlayer.addEventListener('canplay', function(e) {
           console.log('视频已准备好开始播放')
           // 事件对象
          //  console.log(e)
          resolve(videoPlayer)
          })
   })
      p2video.then(function(value){
        console.log(value)
      })


  })

</script>
</html>